<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-tabs v-model="state.param.type" @tab-click="handleClick">
						<el-tab-pane v-for="item in state.query.orderType" :label="item.label" :name="item.value"  :key="item.value"></el-tab-pane>
					</el-tabs>
					<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
						<el-table-column prop="id" label="ID" show-overflow-tooltip></el-table-column>
						<el-table-column prop="name" label="通知类型" show-overflow-tooltip></el-table-column>
						<el-table-column prop="id" label="通知场景说明" show-overflow-tooltip></el-table-column>
						<el-table-column prop="id" label="系统通知" show-overflow-tooltip></el-table-column>
						<el-table-column prop="id" label="短信通知" show-overflow-tooltip></el-table-column>
						<el-table-column prop="id" label="公众号通知" show-overflow-tooltip></el-table-column>
						<el-table-column prop="id" label="小程序通知" show-overflow-tooltip></el-table-column>
						<el-table-column label="操作" show-overflow-tooltip>
							<template #default="scope">
								<span>213</span>
							</template>
						</el-table-column>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
								v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
								:total="state.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
	</div>
</template>

<script setup lang="ts" name="saleIndex">
import { reactive,onMounted} from 'vue';
import { useRouter } from 'vue-router';
import type { saleOrderListData, storeNodeListData, channelListData } from "/@/types/order";
import { orderQuery, storeNodeList, channelList, orderAddNote, orderCancel } from '/@/api/order';
import { ElMessageBox, ElMessage, TabsPaneContext } from 'element-plus';
// 引入组件

const router = useRouter();
// 定义变量内容
const state = reactive({
	param: {
		source: null, // 0 门店 2 线上 //设置不了得值是哪个？
		mode: null, // 门店类型  null(默认) 全部 0 直营  1 加盟
		nodeId: null, // 门店id
		// 销售渠道
		channel: null,
		status: null,
		payType:null,
		dateTime: [],
		startTime: "",// 开始时间
		endTime: "",// 结束时间 
		timeInterval: 3, // 默认 null  时间范围  0 本月 1 本季度  2 今年  3 自定义时 须 startTime 和 endTime 时间可为null
		keyword: "",
		type: 999, 
		pageNum: 1,
		pageSize: 10,
	},
	query: {
		orderSource: [
			{ value: null, label: '全部' },
			{ value: 0, label: '门店订单' },
			{ value: 2, label: '线上订单' }
		],
		storeType: [
			{ value: null, label: '全部' },
			{ value: 0, label: '直营' },
			{ value: 1, label: '加盟' }
		],
		storeList: [] as Array<storeNodeListData>,
		saleChannel: [] as Array<channelListData>,
		orderStatus: [
			{ value: null, label: '全部' },
			{ value: 0, label: '待支付/到店付' },
			{ value: 1, label: '待发货' },
			{ value: 7, label: '待收货/待核销' },
			{ value: 8, label: '待评价' },
			{ value: 4, label: '已完成' },
			{ value: 11, label: '退款中' },
			{ value: 10, label: '已退款' },
			{ value: 6, label: '已关闭' },
			{ value: 14, label: '已撤销' },
		],
		payType: [
			{ value: null, label: '全部' },
		],
		orderType:[
			{ value: 999, label: '会员通知' },
			{ value: 998, label: '平台通知' },
		]
	},
	loading: false,
	total: 0,
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			search: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
});

onMounted(() => {
	// 获取订单列表
	getOrderList();
	// 获取门店列表
	getStoreNodeList();
	// 获取销售渠道列表
	getChannelList();
})

// 获取订单列表
const getOrderList = async () => {
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	// 对
	const { results } = await orderQuery(state.param);
	state.loading = false;
	state.tableData = results.records;
	state.total = results.total;
}

/**
 * 获取销售渠道列表
 */
 const getChannelList = async () => {
	const { results } = await channelList({ source: state.param.source, });
	state.query.saleChannel = results;
}

/**
 * 获取门店列表
 * mode  null /全部   0直营  1加盟
 */
const getStoreNodeList = async () => {
	const { results } = await storeNodeList({ mode: null, current: 1, size: 50 });
	let no1 = [{id:null,name:'全部'}]
	state.query.storeList = [...no1, ...results.records];
}

const handleClick = (tab: TabsPaneContext) => {
	let select = tab.props.name
	if (select != state.param.type) {
		state.param.pageNum = 1;
		state.param.type = select! as any;  //赋值 赋值是 + select!?  + 代表把字符串转为数字  ！ 是TS里面非空符号
		state.param.type = 999
		getOrderList();
	}
}


// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getOrderList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getOrderList();
};
</script>
<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>